<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-07-13 10:44:18
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-08-23 21:05:45
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\section-group.vue
 * @Description: 组合栏目和多重栏目
-->
<template>
  <Tabs
    v-if="data.type === 'sectionGroup'"
    :data="data"
    :sectionThemeData="sectionThemeData"
    :sectionStyle="sectionThemeData.sectionTheme"
    :customStyle="data.customStyle ? data.customStyle : {}"
    :entityId="data.entityId"
    :contentWidth="contentWidth"
    :type="data.type"
    :isMultiSection="isMultiSection"
  /><ContentPanel
    v-else
    :containerStyle="{
      borderBottomLeftRadius: `${sectionThemeData.sectionTheme.sectionPanelBorderRadius}px`,
      borderBottomRightRadius: `${sectionThemeData.sectionTheme.sectionPanelBorderRadius}px`,
      overflow: 'hidden'
    }"
    :sectionStyle="sectionThemeData.sectionTheme"
    :sectionThemeData="sectionThemeData"
    :sectionData="data.sectionData"
    :contentWidth="contentWidth"
    :entityId="data.entityId"
    :setSectionData="(fetchedData) => setSectionData(data.sectionData, fetchedData)"
    :panel="data"
  />
</template>
<script>
  import ContentPanel from '@/components/tabs/content-panel';
  export default {
    name: 'SectionGroup',
    components: { ContentPanel },
    props: {
      sectionThemeData: {
        type: Object
      },

      isMultiSection: {
        type: Boolean,
        default: false
      },
      data: {
        type: Object,
        default: () => ({})
      },
      entityId: {
        type: String
      },
      customStyle: { type: Object },
      contentWidth: { type: Number }
    },
    methods: {
      setSectionData(sectionData, data) {
        sectionData.data = data;
      }
    }
  };
</script>
